<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_CSS3D-平移效果</title>
  <!-- 
  CSS3 的平移效果（Translation）是一种用于在二维或三维空间中移动元素的技术。通过使用 CSS 的  `transform`  属性，可以实现元素的平移效果。
  1. 基本概念
  - 平移效果：平移是将元素在其当前位置上沿着 X 轴、Y 轴或 Z 轴移动。平移不会影响其他元素的布局，元素在移动时仍然占据原来的空间。

  2. 关键属性
  -  `transform` ：用于应用各种变换效果的属性，包括平移、旋转、缩放等。
  -  `translateX()` 、 `translateY()`  和  `translateZ()` ：分别用于在 X 轴、Y 轴和 Z 轴上平移元素。

   示例：
  .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transition: transform 0.5s; /* 添加过渡效果 */
  }

  /* 在 X 轴上平移 */
  .box.translate-x {
      transform: translateX(100px); /* 向右平移 100 像素 */
  }

  /* 在 Y 轴上平移 */
  .box.translate-y {
      transform: translateY(100px); /* 向下平移 100 像素 */
  }

  /* 在 Z 轴上平移 */
  .box.translate-z {
      transform: translateZ(50px); /* 向前平移 50 像素 */
  }
  3. 使用示例

  以下是一个简单的示例，展示如何使用平移效果：
  <div class="box" id="box">Move Me</div>
  <button onclick="moveX()">Move Right</button>
  <button onclick="moveY()">Move Down</button>
  function moveX() {
      document.getElementById('box').classList.toggle('translate-x');
  }

  function moveY() {
      document.getElementById('box').classList.toggle('translate-y');
  }
  4. 注意事项
  - 性能：使用  `transform`  进行平移通常比使用  `margin`  或  `top` 、 `left`  属性更高效，因为  `transform`  是 GPU 加速的。
  - 布局影响：平移不会改变元素在文档流中的位置，其他元素不会受到影响。

  5. 总结
  CSS3 的平移效果提供了一种简便的方式来移动元素。通过使用  `transform`  属性的  `translateX()` 、 `translateY()`  和  `translateZ()`  函数，可以在不同轴上实现平移效果。平移效果不仅可以增强用户体验，还可以用于创建动态和交互式的网页设计。掌握平移效果的使用，可以帮助开发者设计出更加生动的用户界面。
  -->
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .container {
      height: 200px;
    }

    .translate-xy-effect {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      /* 形变 */
      /* transform: translateX(100px) translateY(100px); */

      /* 简写 */
      transform: translate3d(100px, 100px, 0);
    }

    .translate-z-effect {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      /* 形变 */
      transform: perspective(300px) translateZ(100px);
    }
  </style>
</head>
<body>

  <h2>1. translateXY</h2>
  <div class="container">
    <div class="translate-xy-effect">translate-xy</div>
  </div>
  
  <h2>2. translateZ</h2>
  <div class="container">
    <div class="translate-z-effect">translate-z</div>
  </div>
  
</body>
</html>